<a href='https://github.com/angular/angular.js/edit/v1.6.x/src/auto/injector.js?message=docs($provide)%3A%20describe%20your%20change...#L343' class='improve-docs btn btn-primary'><i class="glyphicon glyphicon-edit">&nbsp;</i>Improve this Doc</a>



<a href='https://github.com/angular/angular.js/tree/v1.6.6/src/auto/injector.js#L343' class='view-source pull-right btn btn-primary'>
  <i class="glyphicon glyphicon-zoom-in">&nbsp;</i>View Source
</a>


<header class="api-profile-header">
  <h1 class="api-profile-header-heading">$provide</h1>
  <ol class="api-profile-header-structure naked-list step-list">
    
  

    <li>
      - service in module <a href="api/auto">auto</a>
    </li>
  </ol>
</header>





<div class="api-profile-description">
  <p>The <a href="api/auto/service/$provide">$provide</a> service has a number of methods for registering components
with the <a href="api/auto/service/$injector">$injector</a>. Many of these functions are also exposed on
<a href="api/ng/type/angular.Module"><code>angular.Module</code></a>.</p>
<p>An Angular <strong>service</strong> is a singleton object created by a <strong>service factory</strong>.  These <strong>service
factories</strong> are functions which, in turn, are created by a <strong>service provider</strong>.
The <strong>service providers</strong> are constructor functions. When instantiated they must contain a
property called <code>$get</code>, which holds the <strong>service factory</strong> function.</p>
<p>When you request a service, the <a href="api/auto/service/$injector">$injector</a> is responsible for finding the
correct <strong>service provider</strong>, instantiating it and then calling its <code>$get</code> <strong>service factory</strong>
function to get the instance of the <strong>service</strong>.</p>
<p>Often services have no configuration options and there is no need to add methods to the service
provider.  The provider will be no more than a constructor function with a <code>$get</code> property. For
these cases the <a href="api/auto/service/$provide">$provide</a> service has additional helper methods to register
services without specifying a provider.</p>
<ul>
<li><a href="api/auto/service/$provide#provider">provider(name, provider)</a> - registers a <strong>service provider</strong> with the
  <a href="api/auto/service/$injector">$injector</a></li>
<li><a href="api/auto/service/$provide#constant">constant(name, obj)</a> - registers a value/object that can be accessed by
  providers and services.</li>
<li><a href="api/auto/service/$provide#value">value(name, obj)</a> - registers a value/object that can only be accessed by
  services, not providers.</li>
<li><a href="api/auto/service/$provide#factory">factory(name, fn)</a> - registers a service <strong>factory function</strong>
  that will be wrapped in a <strong>service provider</strong> object, whose <code>$get</code> property will contain the
  given factory function.</li>
<li><a href="api/auto/service/$provide#service">service(name, Fn)</a> - registers a <strong>constructor function</strong>
  that will be wrapped in a <strong>service provider</strong> object, whose <code>$get</code> property will instantiate
   a new object using the given constructor function.</li>
<li><a href="api/auto/service/$provide#decorator">decorator(name, decorFn)</a> - registers a <strong>decorator function</strong> that
   will be able to modify or replace the implementation of another service.</li>
</ul>
<p>See the individual methods for more information and examples.</p>

</div>




<div>
  

  

  

  
<h2>Methods</h2>
<ul class="methods">
  <li id="provider">
    <h3><p><code>provider(name, provider);</code></p>

</h3>
    <div><p>Register a <strong>provider function</strong> with the <a href="api/auto/service/$injector">$injector</a>. Provider functions
are constructor functions, whose instances are responsible for &quot;providing&quot; a factory for a
service.</p>
<p>Service provider names start with the name of the service they provide followed by <code>Provider</code>.
For example, the <a href="api/ng/service/$log">$log</a> service has a provider called
<a href="api/ng/provider/$logProvider">$logProvider</a>.</p>
<p>Service provider objects can have additional methods which allow configuration of the provider
and its service. Importantly, you can configure what kind of service is created by the <code>$get</code>
method, or how that service will act. For example, the <a href="api/ng/provider/$logProvider">$logProvider</a> has a
method <a href="api/ng/provider/$logProvider#debugEnabled">debugEnabled</a>
which lets you specify whether the <a href="api/ng/service/$log">$log</a> service will log debug messages to the
console or not.</p>
</div>

    

    
    <h4>Parameters</h4>
    
<table class="variables-matrix input-arguments">
  <thead>
    <tr>
      <th>Param</th>
      <th>Type</th>
      <th>Details</th>
    </tr>
  </thead>
  <tbody>
    
    <tr>
      <td>
        name
        
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-string">string</a>
      </td>
      <td>
        <p>The name of the instance. NOTE: the provider will be available under <code>name +
                        &#39;Provider&#39;</code> key.</p>

        
      </td>
    </tr>
    
    <tr>
      <td>
        provider
        
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-object">Object</a><a href="" class="label type-hint type-hint-function">function()</a>
      </td>
      <td>
        <p>If the provider is:</p>
<ul>
<li><code>Object</code>: then it should have a <code>$get</code> method. The <code>$get</code> method will be invoked using
<a href="api/auto/service/$injector#invoke">$injector.invoke()</a> when an instance needs to be created.</li>
<li><code>Constructor</code>: a new instance of the provider will be created using
<a href="api/auto/service/$injector#instantiate">$injector.instantiate()</a>, then treated as <code>object</code>.</li>
</ul>

        
      </td>
    </tr>
    
  </tbody>
</table>

    

    

    
    <h4>Returns</h4>
    <table class="variables-matrix return-arguments">
  <tr>
    <td><a href="" class="label type-hint type-hint-object">Object</a></td>
    <td><p>registered provider instance</p>
</td>
  </tr>
</table>
    
    <h4 id="$provide.provider-examples">Examples</h4><p>The following example shows how to create a simple event tracking service and register it using
<a href="api/auto/service/$provide#provider">$provide.provider()</a>.</p>
<pre><code class="lang-js">// Define the eventTracker provider
function EventTrackerProvider() {
  var trackingUrl = &#39;/track&#39;;

  // A provider method for configuring where the tracked events should been saved
  this.setTrackingUrl = function(url) {
    trackingUrl = url;
  };

  // The service factory function
  this.$get = [&#39;$http&#39;, function($http) {
    var trackedEvents = {};
    return {
      // Call this to track an event
      event: function(event) {
        var count = trackedEvents[event] || 0;
        count += 1;
        trackedEvents[event] = count;
        return count;
      },
      // Call this to save the tracked events to the trackingUrl
      save: function() {
        $http.post(trackingUrl, trackedEvents);
      }
    };
  }];
}

describe(&#39;eventTracker&#39;, function() {
  var postSpy;

  beforeEach(module(function($provide) {
    // Register the eventTracker provider
    $provide.provider(&#39;eventTracker&#39;, EventTrackerProvider);
  }));

  beforeEach(module(function(eventTrackerProvider) {
    // Configure eventTracker provider
    eventTrackerProvider.setTrackingUrl(&#39;/custom-track&#39;);
  }));

  it(&#39;tracks events&#39;, inject(function(eventTracker) {
    expect(eventTracker.event(&#39;login&#39;)).toEqual(1);
    expect(eventTracker.event(&#39;login&#39;)).toEqual(2);
  }));

  it(&#39;saves to the tracking url&#39;, inject(function(eventTracker, $http) {
    postSpy = spyOn($http, &#39;post&#39;);
    eventTracker.event(&#39;login&#39;);
    eventTracker.save();
    expect(postSpy).toHaveBeenCalled();
    expect(postSpy.mostRecentCall.args[0]).not.toEqual(&#39;/track&#39;);
    expect(postSpy.mostRecentCall.args[0]).toEqual(&#39;/custom-track&#39;);
    expect(postSpy.mostRecentCall.args[1]).toEqual({ &#39;login&#39;: 1 });
  }));
});
</code></pre>
</li>
  
  <li id="factory">
    <h3><p><code>factory(name, $getFn);</code></p>

</h3>
    <div><p>Register a <strong>service factory</strong>, which will be called to return the service instance.
This is short for registering a service where its provider consists of only a <code>$get</code> property,
which is the given service factory function.
You should use <a href="api/auto/service/$provide#factory">$provide.factory(getFn)</a> if you do not need to
configure your service in a provider.</p>
</div>

    

    
    <h4>Parameters</h4>
    
<table class="variables-matrix input-arguments">
  <thead>
    <tr>
      <th>Param</th>
      <th>Type</th>
      <th>Details</th>
    </tr>
  </thead>
  <tbody>
    
    <tr>
      <td>
        name
        
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-string">string</a>
      </td>
      <td>
        <p>The name of the instance.</p>

        
      </td>
    </tr>
    
    <tr>
      <td>
        $getFn
        
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-function">function()</a><a href="" class="label type-hint type-hint-array">Array.&lt;(string|function())&gt;</a>
      </td>
      <td>
        <p>The injectable $getFn for the instance creation.
                     Internally this is a short hand for <code>$provide.provider(name, {$get: $getFn})</code>.</p>

        
      </td>
    </tr>
    
  </tbody>
</table>

    

    

    
    <h4>Returns</h4>
    <table class="variables-matrix return-arguments">
  <tr>
    <td><a href="" class="label type-hint type-hint-object">Object</a></td>
    <td><p>registered provider instance</p>
</td>
  </tr>
</table>
    
    <h4 id="$provide.factory-examples">Examples</h4><p>Here is an example of registering a service</p>
<pre><code class="lang-js">$provide.factory(&#39;ping&#39;, [&#39;$http&#39;, function($http) {
  return function ping() {
    return $http.send(&#39;/ping&#39;);
  };
}]);
</code></pre>
<p>You would then inject and use this service like this:</p>
<pre><code class="lang-js">someModule.controller(&#39;Ctrl&#39;, [&#39;ping&#39;, function(ping) {
  ping();
}]);
</code></pre>
</li>
  
  <li id="service">
    <h3><p><code>service(name, constructor);</code></p>

</h3>
    <div><p>Register a <strong>service constructor</strong>, which will be invoked with <code>new</code> to create the service
instance.
This is short for registering a service where its provider&#39;s <code>$get</code> property is a factory
function that returns an instance instantiated by the injector from the service constructor
function.</p>
<p>Internally it looks a bit like this:</p>
<pre><code>{
  $get: function() {
    return $injector.instantiate(constructor);
  }
}
</code></pre>
<p>You should use <a href="api/auto/service/$provide#service">$provide.service(class)</a> if you define your service
as a type/class.</p>
</div>

    

    
    <h4>Parameters</h4>
    
<table class="variables-matrix input-arguments">
  <thead>
    <tr>
      <th>Param</th>
      <th>Type</th>
      <th>Details</th>
    </tr>
  </thead>
  <tbody>
    
    <tr>
      <td>
        name
        
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-string">string</a>
      </td>
      <td>
        <p>The name of the instance.</p>

        
      </td>
    </tr>
    
    <tr>
      <td>
        constructor
        
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-function">function()</a><a href="" class="label type-hint type-hint-array">Array.&lt;(string|function())&gt;</a>
      </td>
      <td>
        <p>An injectable class (constructor function)
    that will be instantiated.</p>

        
      </td>
    </tr>
    
  </tbody>
</table>

    

    

    
    <h4>Returns</h4>
    <table class="variables-matrix return-arguments">
  <tr>
    <td><a href="" class="label type-hint type-hint-object">Object</a></td>
    <td><p>registered provider instance</p>
</td>
  </tr>
</table>
    
    <h4 id="$provide.service-examples">Examples</h4><p>Here is an example of registering a service using
<a href="api/auto/service/$provide#service">$provide.service(class)</a>.</p>
<pre><code class="lang-js">var Ping = function($http) {
  this.$http = $http;
};

Ping.$inject = [&#39;$http&#39;];

Ping.prototype.send = function() {
  return this.$http.get(&#39;/ping&#39;);
};
$provide.service(&#39;ping&#39;, Ping);
</code></pre>
<p>You would then inject and use this service like this:</p>
<pre><code class="lang-js">someModule.controller(&#39;Ctrl&#39;, [&#39;ping&#39;, function(ping) {
  ping.send();
}]);
</code></pre>
</li>
  
  <li id="value">
    <h3><p><code>value(name, value);</code></p>

</h3>
    <div><p>Register a <strong>value service</strong> with the <a href="api/auto/service/$injector">$injector</a>, such as a string, a
number, an array, an object or a function. This is short for registering a service where its
provider&#39;s <code>$get</code> property is a factory function that takes no arguments and returns the <strong>value
service</strong>. That also means it is not possible to inject other services into a value service.</p>
<p>Value services are similar to constant services, except that they cannot be injected into a
module configuration function (see <a href="api/ng/type/angular.Module#config"><code>angular.Module</code></a>) but they can be overridden by
an Angular <a href="api/auto/service/$provide#decorator">decorator</a>.</p>
</div>

    

    
    <h4>Parameters</h4>
    
<table class="variables-matrix input-arguments">
  <thead>
    <tr>
      <th>Param</th>
      <th>Type</th>
      <th>Details</th>
    </tr>
  </thead>
  <tbody>
    
    <tr>
      <td>
        name
        
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-string">string</a>
      </td>
      <td>
        <p>The name of the instance.</p>

        
      </td>
    </tr>
    
    <tr>
      <td>
        value
        
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-object">*</a>
      </td>
      <td>
        <p>The value.</p>

        
      </td>
    </tr>
    
  </tbody>
</table>

    

    

    
    <h4>Returns</h4>
    <table class="variables-matrix return-arguments">
  <tr>
    <td><a href="" class="label type-hint type-hint-object">Object</a></td>
    <td><p>registered provider instance</p>
</td>
  </tr>
</table>
    
    <h4 id="$provide.value-examples">Examples</h4><p>Here are some examples of creating value services.</p>
<pre><code class="lang-js">$provide.value(&#39;ADMIN_USER&#39;, &#39;admin&#39;);

$provide.value(&#39;RoleLookup&#39;, { admin: 0, writer: 1, reader: 2 });

$provide.value(&#39;halfOf&#39;, function(value) {
  return value / 2;
});
</code></pre>
</li>
  
  <li id="constant">
    <h3><p><code>constant(name, value);</code></p>

</h3>
    <div><p>Register a <strong>constant service</strong> with the <a href="api/auto/service/$injector">$injector</a>, such as a string,
a number, an array, an object or a function. Like the <a href="api/auto/service/$provide#value">value</a>, it is not
possible to inject other services into a constant.</p>
<p>But unlike <a href="api/auto/service/$provide#value">value</a>, a constant can be
injected into a module configuration function (see <a href="api/ng/type/angular.Module#config"><code>angular.Module</code></a>) and it cannot
be overridden by an Angular <a href="api/auto/service/$provide#decorator">decorator</a>.</p>
</div>

    

    
    <h4>Parameters</h4>
    
<table class="variables-matrix input-arguments">
  <thead>
    <tr>
      <th>Param</th>
      <th>Type</th>
      <th>Details</th>
    </tr>
  </thead>
  <tbody>
    
    <tr>
      <td>
        name
        
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-string">string</a>
      </td>
      <td>
        <p>The name of the constant.</p>

        
      </td>
    </tr>
    
    <tr>
      <td>
        value
        
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-object">*</a>
      </td>
      <td>
        <p>The constant value.</p>

        
      </td>
    </tr>
    
  </tbody>
</table>

    

    

    
    <h4>Returns</h4>
    <table class="variables-matrix return-arguments">
  <tr>
    <td><a href="" class="label type-hint type-hint-object">Object</a></td>
    <td><p>registered instance</p>
</td>
  </tr>
</table>
    
    <h4 id="$provide.constant-examples">Examples</h4><p>Here a some examples of creating constants:</p>
<pre><code class="lang-js">$provide.constant(&#39;SHARD_HEIGHT&#39;, 306);

$provide.constant(&#39;MY_COLOURS&#39;, [&#39;red&#39;, &#39;blue&#39;, &#39;grey&#39;]);

$provide.constant(&#39;double&#39;, function(value) {
  return value * 2;
});
</code></pre>
</li>
  
  <li id="decorator">
    <h3><p><code>decorator(name, decorator);</code></p>

</h3>
    <div><p>Register a <strong>decorator function</strong> with the <a href="api/auto/service/$injector">$injector</a>. A decorator function
intercepts the creation of a service, allowing it to override or modify the behavior of the
service. The return value of the decorator function may be the original service, or a new service
that replaces (or wraps and delegates to) the original service.</p>
<p>You can find out more about using decorators in the <a href="guide/decorators">decorators</a> guide.</p>
</div>

    

    
    <h4>Parameters</h4>
    
<table class="variables-matrix input-arguments">
  <thead>
    <tr>
      <th>Param</th>
      <th>Type</th>
      <th>Details</th>
    </tr>
  </thead>
  <tbody>
    
    <tr>
      <td>
        name
        
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-string">string</a>
      </td>
      <td>
        <p>The name of the service to decorate.</p>

        
      </td>
    </tr>
    
    <tr>
      <td>
        decorator
        
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-function">function()</a><a href="" class="label type-hint type-hint-array">Array.&lt;(string|function())&gt;</a>
      </td>
      <td>
        <p>This function will be invoked when the service needs to be
   provided and should return the decorated service instance. The function is called using
   the <a href="api/auto/service/$injector#invoke">injector.invoke</a> method and is therefore fully injectable.
   Local injection arguments:</p>
<ul>
<li><code>$delegate</code> - The original service instance, which can be replaced, monkey patched, configured,
decorated or delegated to.</li>
</ul>

        
      </td>
    </tr>
    
  </tbody>
</table>

    

    

    
    <h4 id="$provide.decorator-examples">Examples</h4><p>Here we decorate the <a href="api/ng/service/$log">$log</a> service to convert warnings to errors by intercepting
calls to <a href="api/ng/service/$log#error">$log.warn()</a>.</p>
<pre><code class="lang-js">$provide.decorator(&#39;$log&#39;, [&#39;$delegate&#39;, function($delegate) {
  $delegate.warn = $delegate.error;
  return $delegate;
}]);
</code></pre>
</li>
  </ul>
  
  



  
</div>


